<template>
	<div class="HomeBookItemBox">
		<!-- :book_items="item" ==> 把遍历出来的一个个item以book_items的名称传递到子组件 -->
		<bookItem v-for="(item, index) in items" :key="index" :book_items="item"></bookItem>
	</div>
</template>

<script>
	import bookItem from 'views/DetailsPage/bookItem'

	export default {
		name: 'HomeBookItemBox',
		components: {
			bookItem
		},
		data() {
			return {
				book_items: [],
				items: []
			}
		},
		mounted() {
			this.axios.get('http://192.168.43.169/api/bookitem').then((response) => {
				let resdata = response.data;
				if(resdata.code == 200){
					this.items =  resdata.data
				}
			});
		}
	}
</script>

<style>
	.HomeBookItemBox{
		width: 100%;
		/* 大盒子设置为弹性布局 */
		display: flex;
		/* 设置为"包裹",即一行根据内容块的宽度可以放多少个就放多少个 */
		/* 如果设置为"不包裹(nowrap)",即所有内容块往一行里塞 */
		/* 切记:里面的小内容块一定要设置宽度！！而且最好是百分比形式 */
		/* 因为如果是px形式的话,切换到不同尺寸的移动端时预留的空间就不一样了 */
		flex-wrap: wrap;
		/* 设置均等分一行 */
		justify-content: space-around;
		padding: 31px 10px;
	}
</style>
